<template>
	<d2-container v-show="goodsAddShow">
		<div slot="header">
			<el-link type="primary" @click="goodsAddShow = false">
				<i class="el-icon-back"></i> 返回
			</el-link>
		</div>
		<div style="width: 500px;">
			<el-form ref="form" :model="form" label-width="100px">
				<!--<el-form-item label="套餐名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>-->
				<el-form-item label="套餐价格" prop="price">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
				<el-form-item label="商品排序" prop="sort">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="是否上架" prop="state">
					<el-radio :label="1" v-model="form.state">上架</el-radio>
					<el-radio :label="2" v-model="form.state">下架</el-radio>
				</el-form-item>
				<el-form-item label="是否推荐" prop="是否推荐">
					<el-radio :label="2" v-model="form.is_tj">否</el-radio>
					<el-radio :label="1" v-model="form.is_tj">是</el-radio>
				</el-form-item>
				<el-form-item label="商品分类">
					<el-select placeholder="请选择商品分类" v-model="form.category">
						<el-option v-for="(item, key) in classData" :label="item.name" :key="key" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品单位">
					<el-select placeholder="请选择商品单位" v-model="form.ggid">
						<el-option v-for="(item, key) in Company" :label="item.name" :key="key" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="套餐描述" prop="des">
					<el-input type="textarea" v-model="form.des"></el-input>
				</el-form-item>
				<el-form-item label="套餐缩略图">
					<el-upload action="managea/Tphoto" list-type="picture-card" :on-remove="handleRemove" :on-error="handlError" :on-exceed="handlExceed" :on-success="handlSuccess" :before-upload="beforeAvatarUpload" :file-list="fileList" :limit="1">
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议图片尺寸750*490像素</div>
				</el-form-item>
				<el-form-item label="套餐轮播图">
					<el-upload action="managea/Tphoto" 
						list-type="picture-card" 
						:on-remove="handleRemoveBanner" 
						:on-error="handlErrorBanner" 
						:on-success="handlSuccessBanner" 
						:file-list="fileListBanner" 
						:before-upload="beforeAvatarUpload">
						<i class="el-icon-plus"></i>
					</el-upload>
					<div style="color: red;">建议图片尺寸1242*700像素</div>
				</el-form-item>
				<el-form-item></el-form-item>
			</el-form>
		</div>

		<!--穿梭框-->

		<div id="" style="display: flex;">
			<div id="" style="width: 30%;border: 1px solid #EEEEEE;">
				<el-table ref="singleTable" :data="classData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
					<el-table-column type="index" label="序号" width="100">
					</el-table-column>
					<el-table-column property="name" label="分类">
					</el-table-column>

				</el-table>
				<!--<div style="margin-top: 20px">
    <el-button @click="setCurrent(classData[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>-->
			</div>
			<div id="">

				<!--<el-form :inline="true" :model="staffTemp">
					<el-form-item label="菜品">
						<el-input v-model="staffTemp.name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getStaffList">查找</el-button>
					</el-form-item>
				</el-form>--> 
				<div style="color: red;">  ※套餐名称就是各个单品名称连接起来※</div>
				<el-row :gutter="50">
					<el-col :span="11">
						<el-table row-key="id" ref="staffTable" :data="staffList" border fit highlight-current-row @selection-change="handleStaffChange">
							<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
							<el-table-column label="菜品" align="center">
								<template slot-scope="{row}">
									<span>{{ row.name }}</span>
								</template>
							</el-table-column>

							<el-table-column label="规格" align="center">
								<template slot-scope="{row}">
									<span>{{ row.price }}</span>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
					<el-col :span="2" style="text-align:center;">
						<el-button @click="addStaff" type="primary" :disabled="!staffData.length" icon="el-icon-arrow-right" circle style="margin-top: 50px;"></el-button>
						<el-button @click="removeStaff" type="primary" :disabled="!selectedStaffData.length" icon="el-icon-arrow-left" circle style="margin-left: 0;margin-top: 10px;"></el-button>
					</el-col>
					<el-col :span="11">
						<el-table row-key="id" ref="selectedStaffTable" :data="selectedStaffList" border fit highlight-current-row @selection-change="handleSelectedStaffChange">
							<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
							<el-table-column label="菜品" align="center">
								<template slot-scope="{row}">
									<span>{{ row.name }}</span>
								</template>
							</el-table-column>

							<el-table-column label="价格/规格" align="center">
								<template slot-scope="{row}">
									<span>{{ row.price }}</span>
								</template>
							</el-table-column>

							<!--<el-table-column label="类型" align="center">
							<template slot-scope="{row}">
								<el-select class="filter-item" placeholder="请选择" v-model="row.staffTypeId">
									<el-option v-for="item in staffOptions" :key="item.key" :label="item.display_name" :value="item.key"></el-option>
								</el-select>
							</template>
						</el-table-column>-->
						</el-table>
					</el-col>
				</el-row>
			</div>
		</div>

		<div slot="footer">
			<div style="float: right;">
				<el-button type="primary" @click="onProSubmit">确定</el-button>
				<el-button @click="goodsAddShow = false">取消</el-button>
			</div>
		</div>
	</d2-container>
</template>
<style>
	.el-transfer-panel {
		width: 230px;
	}
	
	.el-checkbox__label .small {
		font-size: 10px;
		float: right;
		color: rgb(172, 165, 165);
	}
	
	.el-checkbox:last-of-type {
		margin-right: 30px;
	}
</style>
<script>
	import { getGuige, postPackageAdd, getCategory, getPackageAddList, getPackageAddListCur, getPackageInfo, postPackageEdit } from '@api/api';
	export default {
		props: {
			value: Boolean,
			id: Number
		},
		watch: {
			value(val) {
				if(val) {
					this.goodsAddShow = val;
					this.getGuiGe();
					this.getClass()
				} else {}
			},
			goodsAddShow(val) {
				if(val && this.id != -1) {
					//修改
					this.getComUpdata()
				} else {
					this.$parent.getProductData()
					this.$emit('input', val);
					this.form = {};
					this.fileList = [];
					this.fileListBanner = []
				}
			}
		},
		data() {

			return {
				//				分类
				
				currentRow: null,

				listLoading: true,
				staffTemp: {
					name: "",
					price: "",
				},
				staffList: [
					//				{name: "41234",
					//					price: "fadsf",
					//				}, {
					//					name: "3333",
					//					price: "fadsf",
					//				}, {
					//					name: "444",
					//					price: "fadsf",
					//				}, 
				],
				selectedStaffList: [],
				staffData: [],
				selectedStaffData: [],
				tableKey: 0,
				rowKey: "rowKey",
				//				staffOptions: [{
				//						key: 28,
				//						display_name: "补货员"
				//					},
				//					{
				//						key: 29,
				//						display_name: "测试员"
				//					}
				//				],

				goodsAddShow: false,
				form: {
					ggid: '',
					category: '',
//					name: '',
					thumb: '',
					image: '',
					des: '',
					price: '',
					sort: 0,
					is_tj: 2,
					state: 1,
					proid: '',
					tc:1,
					
				},
				//商品单位
				Company: [],
				classData: [], //分类
				fileListBanner: [], //商品轮播图
				fileList: [], //商品主图
				ListImage: [],
				baseUrl: process.env.VUE_APP_URL
			};
		},
		mounted(){
			
		},
		methods: {
			
			//			选择分类
			setCurrent(row) {
				this.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(val) {
				
				//				this.currentRow = val;
				if(val!=null) {
					console.log(val.id)
					getPackageAddListCur(val.id).then(res => {
						if(res.state == 0) {
							this.staffList = res.data.product
						}
						console.log(this.staffList)
						for(let i = 0; i < this.staffList.length; i++) {
							for(let j = 0; j < this.selectedStaffList.length; j++) {
								if(
									this.staffList[i] &&
									this.selectedStaffList[j] &&
									this.staffList[i].name === this.selectedStaffList[j].name
								) {
									this.staffList.splice(i, 1);
								}
							}
						}
						//				console.log(this.staffList)
					})
				}

			},

			//修改加载
			getComUpdata() {
				this.staffList=[];
				this.selectedStaffList=[];
				getPackageInfo(this.id).then(res => {
					//					console.log(11111111111)
					//					console.log(this.id)
					console.log(res.data)
					if(res.state == 0) {
						this.form = res.data
						if(res.data.thumb != undefined && res.data.thumb != '') {
							var thumbArr = res.data.thumb.split(","); //字符串分割
							for(var i = 0; i < thumbArr.length; i++) {
								let str = {
									url: this.baseUrl + thumbArr[i],
									image: thumbArr[i]
								}
								this.fileList.push(str)
							}
						}
							if(res.data.image != undefined && res.data.image != '') {
								var imageArr = res.data.image.split(",")
								for(var i = 0; i < imageArr.length; i++) {
									let str = {
										url: this.baseUrl + imageArr[i],
										image: imageArr[i]
									}
									this.fileListBanner.push(str)
								}
							}
						res.data.pro.forEach(item => {
							this.selectedStaffList.push(item);
						});
						
					}
				})
			},
			//单位
			getGuiGe() {
				getGuige().then(res => {
					if(res.state == 0) {
						this.Company = res.data.data;
					}
				});
			},
			getClass() {

				getPackageAddList().then(res => {
					console.log(res.data)
					if(res.state == 0) {
						this.classData = res.data.category
					}
					//					console.log(res.data.category)
				})

			},
			onProSubmit() {
				var fileListArr = []
				for(var i = 0; i < this.fileList.length; i++) {
					if(this.fileList[i].response != undefined) {
						console.log(this.fileList[i].response.data[1])
						fileListArr.push(this.fileList[i].response.data[1])
					} else {
						console.warn(this.fileList[i].image)
						fileListArr.push(this.fileList[i].image)
					}
				}
				var fileListBannerArr = []
				for(var i = 0; i < this.fileListBanner.length; i++) {
					if(this.fileListBanner[i].response != undefined) {
						//						console.log(this.fileListBanner[i].response.data[1])
						fileListBannerArr.push(this.fileListBanner[i].response.data[1])
					} else {
						//						console.warn(this.fileListBanner[i].image)
						fileListBannerArr.push(this.fileListBanner[i].image)
					}
				}
				var goodsListIdArr = []
				for(var i = 0; i < this.selectedStaffList.length; i++) {
					goodsListIdArr.push(this.selectedStaffList[i].id)
				}
				//				console.log(goodsListIdArr)
				this.form.thumb = fileListArr.join(','); //主图
				this.form.image = fileListBannerArr.join(',') //轮播图
				this.form.proid = goodsListIdArr.join(','); //已选中的商品id
				this.form.tc = 1;
				console.log(this.form)
				if(this.id == -1) { //添加
					postPackageAdd(this.form).then(res => {
						if(res.state == 0) {
							this.$message.success("添加成功");
							this.goodsAddShow = false
						}
					})
				} else { //修改
//					console.log(this.fileList)
//					console.log(this.fileListBanner)
					this.form.id = this.id
//					console.log(this.form)
					postPackageEdit(this.form).then(res => {
						if(res.state == 0) {
							this.$message.success("修改成功");
							this.goodsAddShow = false
						}
					})
				}
				
			},
			// 商品图上传
			handlSuccess(response, file, fileList) {
				this.fileList = fileList;
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handlError(err, file, fileList) {
				console.log(err, file, fileList);
				this.$message.error('图片上传失败！');
			},
			handlExceed(files, fileList) {
				if(fileList.length >= 1) {
					this.$message.error('只能上传一张图片');
				}
			},
			//轮播图
			handlSuccessBanner(response, file, fileList) {
				this.fileListBanner = fileList;
			},
			handleRemoveBanner(file, fileList) {
				this.fileListBanner = fileList;
			},
			handlErrorBanner(err, file, fileList) {
				console.log(err, file, fileList);
				this.$message.error('图片上传失败！');
			},
			//图片上传 限制大小
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('图片大小不能超过 2MB!');
				}
			},
			//从后台获取产品
			getStaffList() {
				//				console.log(this.staffTemp)
				fetchStaffList(this.staffTemp).then(res => {
					console.log(res)
					if(res.value.staff.length === 0) {
						alert("没有菜品");
					}
					this.staffList = res.value.staff;

				});
				//				this.staffList = [{"name":"18131372315","price":"zhou"}];
			},
			//			穿梭框

			// 将左边表格选择项存入staffData中
			handleStaffChange(rows) {
				this.staffData = [];
				if(rows) {
					rows.forEach(row => {
						if(row) {
							this.staffData.push(row);
						}
					});
				}
			},
			// 左边表格选择项移到右边
			addStaff() {
				setTimeout(() => {
					this.$refs["staffTable"].clearSelection();
					this.$refs["selectedStaffTable"].clearSelection();
				}, 0);
				let repeat = false;
				this.selectedStaffList.forEach(item => {
					if(this.staffData[0] && item.name === this.staffData[0].name) {
						repeat = true;
						//						alert("此员工已添加");
						return;
					}
				});
				if(repeat === false) {
					this.staffData.forEach(item => {
						this.selectedStaffList.push(item);
					});
					for(let i = 0; i < this.staffList.length; i++) {
						for(let j = 0; j < this.staffData.length; j++) {
							if(
								this.staffList[i] &&
								this.staffData[j] &&
								this.staffList[i].name === this.staffData[j].name
							) {
								this.staffList.splice(i, 1);
							}
						}
					}
					console.log(this.selectedStaffList)
				}
			},
			// 右边表格选择项移到左边
			removeStaff() {
				setTimeout(() => {
					this.$refs["staffTable"].clearSelection();
					this.$refs["selectedStaffTable"].clearSelection();
				}, 0);
				this.selectedStaffData.forEach(item => {
					this.staffList.push(item);
				});
				for(let i = 0; i < this.selectedStaffList.length; i++) {
					for(let j = 0; j < this.selectedStaffData.length; j++) {
						if(
							this.selectedStaffList[i] &&
							this.selectedStaffData[j] &&
							this.selectedStaffList[i].name === this.selectedStaffData[j].name
						) {
							this.selectedStaffList.splice(i, 1);
						}
					}
				}
			},
			// 将右边表格选择项存入selectedStaffData中
			handleSelectedStaffChange(rows) {
				this.selectedStaffData = [];
				if(rows) {
					rows.forEach(row => {
						if(row) {
							this.selectedStaffData.push(row);
						}
					});
				}
			},
			// 提交
			modifyStaff() {
				let isEmpty = false;
				this.selectedStaffList.forEach(item => {
					if(!item.staffTypeId) {
						alert("请选择类型");
						isEmpty = true;
						return;
					}
				});
				if(isEmpty === false) {
					editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {
						this.staffListVisible = false;
						this.$notify({
							title: "成功",
							message: "修改成功",
							type: "success",
							duration: 2000
						});
					});
				}
			}
		}
	};
</script>

<style></style>